<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true" >
			<block slot="content">客服入驻</block>
		</cu-custom>
		<view class="padding">
			<view class="padding-sm bg-white radius-xl form">
				<view class="item padding-sm crow">
					<view class="name">头像</view>
          <image style="width: 120rpx;height: 120rpx" :src="form.avatar" v-if="form.audit_status  === 1 || form.audit_status  === 2"></image>
					<view class="upload" v-else>
            <u-upload :disabled="form.audit_status  === 1 || form.audit_status  === 2" :action="action" max-count="1" :file-list="fileList" @on-success="successFile" @on-remove="removeFile"></u-upload>
          </view>
				</view>
				<view class="item padding-sm crow">
					<view class="name">姓名</view>
					<input :disabled="form.audit_status  === 1 || form.audit_status  === 2" type="text" placeholder="请输入姓名" class="text-right" v-model="form.nickname">
				</view>
				<view class="item padding-sm crow">
					<view class="name">年龄</view>
					<input :disabled="form.audit_status  === 1 || form.audit_status  === 2" type="text" placeholder="请输入年龄" class="text-right" v-model="form.age">
				</view>
				<view class="item padding-sm crow">
					<view class="name">手机号码</view>
					<input :disabled="form.audit_status  === 1 || form.audit_status  === 2" type="text" placeholder="请输入手机号码" class="text-right" v-model="form.phone">
				</view>
				<view class="item padding-sm crow">
					<view class="name">意向城市</view>
					<view @click="form.audit_status === 0 && (regionShow = true)">
						<template v-if="form.city">{{ form.city}}</template>
						<template v-else>
							<text class="text-gray">请选择城市</text>
						</template>
						<text class="cuIcon-right" v-if="form.audit_status === 0"></text>
					</view>
				</view>
				<view class="item padding-sm crow">
					<view class="name">性别</view>
					<view @click="form.audit_status === 0 && (genderShow = true)">
						<template v-if="form.gender">
							{{form.gender}}
						</template>
						<template v-else>
							<text class="text-gray">请选择性别</text>
						</template>
						<text class="cuIcon-right" v-if="form.audit_status === 0"></text>
					</view>
				</view>
        <view class="item padding-sm crow">
          <view class="name">照片</view>
          <div style="display: flex;flex-wrap: wrap" v-if="form.audit_status  === 1 || form.audit_status  === 2">
            <image v-for="item in form.photos" style="width: 120rpx;height: 120rpx;margin-right: 10rpx;margin-bottom: 10rpx;" :src="item" ></image>
          </div>
          <view class="upload" v-else>
            <u-upload :disabled="form.audit_status  === 1 || form.audit_status  === 2" :action="action" max-count="1" :file-list="fileList2" @on-success="successFile2" @on-remove="removeFile2"></u-upload>
          </view>
        </view>
        <view class="item padding-sm crow">
          <view class="name">个人简介</view>
          <input :disabled="form.audit_status  === 1 || form.audit_status  === 2" type="text" placeholder="请输入个人简介" class="text-right" v-model="form.content">
        </view>
        <view class="item padding-sm crow">
          <view class="name">身份证号码</view>
          <input :disabled="form.audit_status  === 1 || form.audit_status  === 2" type="text" placeholder="请输入身份证号码" class="text-right" v-model="form.card_no">
        </view>
        <view class="item padding-sm crow">
          <view class="name">身份证照片（正面）</view>
          <image style="width: 120rpx;height: 120rpx" :src="form.card_front" v-if="form.audit_status  === 1 || form.audit_status  === 2"></image>

          <u-upload :disabled="form.audit_status  === 1 || form.audit_status  === 2" :action="action" max-count="1" :file-list="fileList3" @on-success="successFile3" @on-remove="removeFile3"></u-upload>
        </view>
        <view class="item padding-sm crow">
          <view class="name">身份证照片（反面）</view>
          <image style="width: 120rpx;height: 120rpx" :src="form.card_back" v-if="form.audit_status  === 1 || form.audit_status  === 2"></image>

          <u-upload :disabled="form.audit_status  === 1 || form.audit_status  === 2" :action="action" max-count="1" :file-list="fileList4" @on-success="successFile4" @on-remove="removeFile4"></u-upload>
        </view>
			</view>

			<view class="padding margin-top-lg">
				<view class="flex flex-direction">
					<template v-if="form.audit_status === 1">
						<button class="cu-btn china-btn-bg lg round" disabled>审核中</button>
					</template>
					<template v-if="form.audit_status === 0">
						<button class="cu-btn china-btn-bg lg round" @click="submit()">提交审核</button>
					</template>
					<template v-if="form.audit_status === 2">
						<text class="text-center">审核成功！</text>
					</template>
          <template v-if="form.audit_status === 3">
            <button class="cu-btn china-btn-bg lg round" @click="submit()">重新提交</button>
          </template>
				</view>
			</view>
		</view>

		<!-- 选择意向城市 -->
    <u-select
        cancel-color="var(--theme-color)"
        confirm-color="var(--theme-color)"
        mode="single-column"
        v-model="regionShow" :list="columns"  @confirm="confirm" @cancel="regionClose"></u-select>
    <u-select
        cancel-color="var(--theme-color)"
        confirm-color="var(--theme-color)"
        mode="single-column"
        v-model="genderShow" :list="[{label:'男',value:'男'},{label:'女',value:'女'}]"  @confirm="genderConfirm" @cancel="genderClose"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				regionShow:false,
				genderShow:false,
				columns: [],
				form: {
          photos: [],
          card_front: '',
          card_back: '',
          audit_status: 0
        },
				Info:[],
        action:  this.$baseUrl + '/api/upload/file',
        fileList: [],
        fileList2: [],
        fileList3: [],
        fileList4: [],
        userInfo: {}
			};
		},
		onLoad() {
      this.userInfo = uni.getStorageSync('userInfo') || {}
      if (!this.userInfo.id) {
        uni.navigateTo({
          url: '/pages/login/login'
        })
      }
      this.$http.getCityList().then(res => {
        this.columns = res.map(item => {
          return {
            value: item.id,
            label: item.name,
            ...item
          }
        });
      });
      this.getList()
		},
		methods:{
      getList() {
        this.$http.getStaffApplyList({
          member_id: this.userInfo.id,
        }).then(res => {
          if (res.length) {
            let avatar = res[0].avatar && res[0].avatar.includes('http') ? res[0].avatar : this.$baseUrl + res[0].avatar
            let photos = res[0].photos ? [res[0].photos]: []
            this.form = {
              ...res[0],
              avatar,
              photos,
              city: res[0].city.name
            }
            this.fileList = [{
              url: avatar
            }]
            this.fileList2 = photos.map(item => {
              return {
                url: item
              }
            })
            this.fileList3 = [{
              url: res[0].card_front
            }]
            this.fileList4 = [{
              url: res[0].card_back
            }]
            console.log('this.fileList3',this.fileList3)
          }
        })
      },
      successFile(e) {
        this.form.avatar = e.data.url && e.data.url.includes('http') ? e.data.url : this.$baseUrl + e.data.url
      },
      removeFile(e) {
        this.form.avatar = ''
      },
      successFile2(e) {
        this.form.photos.push(e.data.url)
      },
      removeFile2(e) {
        this.form.photos.splice(e,1)
      },
      successFile3(e) {
        this.form.card_front = e.data.url && e.data.url.includes('http') ? e.data.url : this.$baseUrl + e.data.url
      },
      removeFile3(e) {
        this.form.card_front = ''
      },
      successFile4(e) {
        this.form.card_back = e.data.url && e.data.url.includes('http') ? e.data.url : this.$baseUrl + e.data.url
      },
      removeFile4(e) {
        this.form.card_back = ''
      },
			submit(){
        if (!this.form.avatar) {
          uni.showToast({
            title: '请上传头像',
            icon: 'none'
          })
          return
        }
        if (!this.form.nickname) {
          uni.showToast({
            title: '请输入姓名',
            icon: 'none'
          })
          return
        }
        if (!this.form.age) {
          uni.showToast({
            title: '请输入年龄',
            icon: 'none'
          })
          return
        }
        if (!this.form.phone) {
          uni.showToast({
            title: '请输入手机号码',
            icon: 'none'
          })
          return
        }
        if (!this.form.city) {
          uni.showToast({
            title: '请选择城市',
            icon: 'none'
          })
          return
        }
        if (!this.form.gender) {
          uni.showToast({
            title: '请选择性别',
            icon: 'none'
          })
          return
        }
        if (!this.form.photos.length) {
          uni.showToast({
            title: '请上传照片墙纸',
            icon: 'none'
          })
          return
        }
        if (!this.form.content) {
          uni.showToast({
            title: '请输入个人简介',
            icon: 'none'
          })
          return
        }
        if (!this.form.card_no) {
          uni.showToast({
            title: '请输入身份证号码',
            icon: 'none'
          })
          return
        }
        if (!this.form.card_front) {
          uni.showToast({
            title: '请上传身份证照片（正面）',
            icon: 'none'
          })
          return
        }
        if (!this.form.card_back) {
          uni.showToast({
            title: '请上传身份证照片（反面）',
            icon: 'none'
          })
          return
        }

        uni.showLoading({
          title: '提交中'
        })
        this.$http.createStaffApply({
          ...this.form,
          photos: this.form.photos[0],
          audit_status: 1,
          member_id: this.userInfo.id
        }).then(res => {
          uni.showToast({
            title: '提交成功',
            icon: 'none'
          })
          this.form.audit_status = 1
        })
			},
			confirm(value){
        console.log(value)
				this.form.city = value[0].label;
				this.form.city_id = value[0].value;
				this.regionClose();
			},
			regionClose(){
				this.regionShow = false;
			},
			genderConfirm(value){
        this.form.gender = value[0].label;
				this.genderClose();
			},
			genderClose(e){
				this.genderShow = false;
			},
		}
	}
</script>

<style lang="less" scoped>
.form{
	.item{
		justify-content: space-between;
		margin-bottom: 30upx;
	}
}
</style>
